<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
</head>
<body>
<form class="layui-form" action="" lay-filter="edit">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                <div class="layui-form-item">
                    <label class="layui-form-label">父级</label>
                    <div class="layui-input-block">
                        <ul id="selectParent" name="pid" class="dtree" data-id="-1"></ul>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="名称"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <input type="radio" lay-filter="powerType" name="type" value="0" title="目录">
                        <input type="radio" lay-filter="powerType" name="type" value="1" title="菜单" checked>
                        <input type="radio" lay-filter="powerType" name="type" value="2" title="接口">
                        <input type="radio" lay-filter="powerType" name="type" value="3" title="数据">
                    </div>
                </div>
                <div class="layui-form-item" id="powerCodeItem">
                    <label class="layui-form-label">标识</label>
                    <div class="layui-input-block">
                        <input type="text" id="powerCode" name="powerCode" autocomplete="off" placeholder="权限标识"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" id="powerUrlItem">
                    <label class="layui-form-label">路径</label>
                    <div class="layui-input-block">
                        <input type="text" id="powerUrl" name="href" autocomplete="off" placeholder="菜单路径"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" id="openTypeItem">
                    <label class="layui-form-label">打开</label>
                    <div class="layui-input-block">
                        <select name="openType" id="openType">
                            <option value=""></option>
                            <option value="_iframe">框架</option>
                            <option value="_blank">签页</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" id="iconItem">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-block">
                        <input type="text" id="icon" name="icon" lay-filter="icon" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" id="dataFilterType">
                    <label class="layui-form-label">数据权限</label>
                    <div class="layui-input-block">
                        <select name="dataFilterType" lay-filter="dataTypeFilter">
                            <option value="ALL" selected>全部</option>
                            <option value="DEPT">本人所在组织机构</option>
                            <option value="SELF">本人</option>
                            <!--                            <option value="DEPT_SETS">自定义组织机构</option>-->
                            <!--                            <option value="DIY">自定义sql过滤</option>-->
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort" lay-verify="number" autocomplete="off" placeholder="排序"
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="power-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
    layui.use(['form', 'jquery', 'dtree', 'iconPicker', 'easyAdmin'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;
        let iconPicker = layui.iconPicker;
        let easyAdmin = layui.easyAdmin;
        let menuId;

        form.on('submit(power-save)', function (data) {
            data.field.icon = "layui-icon " + data.field.icon;
            data.field.menuId = menuId;
            easyAdmin.http({
                url: '/sys/menu',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    if (result.success) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.render();
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });

        // 根据menuId获取详情，用于数据回显
        menuId = easyAdmin.getQueryString("menuId");
        easyAdmin.http({
            url: '/sys/menu/' + menuId,
            dataType: 'json',
            contentType: 'application/json',
            type: 'get',
            success: function (result) {
                if (result.success) {
                    // 表单数据回显
                    form.val("edit", result.data);
                    // 树形选择框回显
                    easyAdmin.httpGet("/sys/menu/selectTree", function (treeresult) {
                        console.log(treeresult)
                        dtree.renderSelect({
                            elem: "#selectParent",
                            method: 'get',
                            data: treeresult.data,
                            selectInputName: {nodeId: "pid", context: "title"},
                            // skin: "layui", // 换皮肤
                            line: true, // 显示树线
                            dataStyle: "layuiStyle",
                            response: {parentId: "pid", title: "title", message: "msg", statusCode: 0},  //修改json response中返回数据的定义
                            selectInitVal: result.data.pid + ''
                        });
                    })


                    iconPicker.checkIcon("icon", result.data.icon);

                    window.init(result.data.type);

                } else {
                    layer.msg(result.msg, {icon: 2, time: 1000});
                }
            }
        });

        form.on("radio(powerType)", function (data) {
            if (this.value == '0') {
                $("#powerUrlItem").hide();
                $("#powerCodeItem").hide();
                $("#openTypeItem").hide();
                $("#iconItem").show();
                $("#dataFilterType").hide();
                // $("#powerUrl").val("");
                // $("#powerCode").val("");
                // $("#openType").val("");
            } else if (this.value == '1') {
                $("#powerUrlItem").show();
                $("#powerCodeItem").hide();
                $("#iconItem").hide();
                $("#dataFilterType").hide();
                $("#openTypeItem").show();
                // $("#powerCode").val("");
            } else if (this.value == '2') {
                $("#powerUrlItem").hide();
                $("#openTypeItem").hide();
                $("#iconItem").hide();
                $("#dataFilterType").hide();
                $("#powerCodeItem").show();
                // $("#powerUrl").val("");
                // $("#openType").val("");
            } else if (this.value == '3') {
                $("#powerUrlItem").hide();
                $("#iconItem").hide();
                $("#openTypeItem").hide();
                $("#powerCodeItem").show();
                $("#dataFilterType").show();
                // $("#powerUrl").val("");
                // $("#openType").val("");
            }
        });

        iconPicker.render({
            elem: '#icon',
            type: 'fontClass',
            search: true,
            page: true,
            limit: 12,
            click: function (data) {
                console.log(data);
            }
        });


        window.init = function (type) {
            if (type == '0') {
                $("#powerUrlItem").hide();
                $("#powerCodeItem").hide();
                $("#openTypeItem").hide();
                $("#dataFilterType").hide();
                $("#iconItem").show();
                $("#powerUrl").val("");
                $("#powerCode").val("");
                $("#openType").val("");
                $("#dataFilterType").val("");
            } else if (type == '1') {
                $("#powerUrlItem").show();
                $("#powerCodeItem").hide();
                $("#iconItem").hide();
                $("#dataFilterType").hide();
                $("#openTypeItem").show();
                $("#powerCode").val("");
                $("#dataFilterType").val("");
            } else if (type == '2') {
                $("#powerUrlItem").hide();
                $("#openTypeItem").hide();
                $("#powerCodeItem").show();
                $("#dataFilterType").hide();
                $("#iconItem").hide();
                $("#powerUrl").val("");
                $("#openType").val("");
                $("#dataFilterType").val("");
            } else if (type == '3') {
                $("#powerUrlItem").hide();
                $("#openTypeItem").hide();
                $("#powerCodeItem").show();
                $("#dataFilterType").show();
                $("#iconItem").hide();
                $("#powerUrl").val("");
                $("#openType").val("");
            }
        };

    })
</script>
<script>
</script>
</body>
</html>
